<template>
    <div id='mine'>
        <div class="wrapper" v-if='pageLoaded'>
            <div class="mine-header">
                <template v-if='sessionId'>
                    <div class="mine-header__avatar">
                        <span class="avatar"><img src="../images/default_avatar.png"></span>
                        <div class="auth" @click='goRouter("auth")' v-if='status === 0'>立即认证</div>
                    </div>
                    <p class="mine-header__tel" v-if='mine.name'>{{ mine.name}}</p>
                    <p class="mine-header__tel" v-else>{{ mine.phone | mobile}}</p>
                    <p class="mine-header__status" v-if='status <= -1'>认证失败</p>
                    <p class="mine-header__status" v-if='status === 0'>未实名认证</p>
                    <p class="mine-header__status" v-if='status >= 10 && status <= 30'>认证中</p>
                    <p class="mine-header__status" v-if='status === 40'>已实名认证</p>
                </template>
                <template v-else>
                    <div class="mine-header__avatar">
                        <span class="avatar"><img src="../images/default_avatar.png"></span>
                    </div>
                    <div class="mine-login" @click='checkLogin'>立即登录</div>
                </template>
            </div>
            <div class="mine-main">
                <div class="menu">
                    <ul class="menu-list">
                        <li class="menu__item" @click='goRouter("bankcard-list")'>
                            <img src="../images/mine_card@3x.png">
                            <p>我的银行卡</p>
                            <i class='iconfont icon-arrow'></i>
                        </li>
                    </ul>
                    <ul class="menu-list">
                        <li class="menu__item" @click='goRouter("help",loanStatus)'>
                            <img src="../images/mine_question@3x.png">
                            <p>使用帮助</p>
                            <i class='iconfont icon-arrow'></i>
                        </li>
                        <li class="menu__item" @click='goService'>
                            <img src="../images/mine_cs@3x.png">
                            <p>联系客服</p>
                            <i class='iconfont icon-arrow'></i>
                        </li>
                    </ul>
                    <ul class="menu-list">
                        <li class="menu__item" @click='goRouter("about"),log("c_about")'>
                            <img src="../images/mine_about@3x.png">
                            <p>关于我们</p>
                            <i class='iconfont icon-arrow'></i>
                        </li>
                    </ul>
                </div>
                <div class="button white" @click='show_modal_logout = true' v-if='sessionId'>退出登录</div>
            </div>
        </div>

        <modal
            class='modal-success'
            :closeButton='true'
            :maskClose='false'
            @close='show_modal_android = false'
            :show='show_modal_android'>
            <img src="../images/img_market.png" width="96">
            <p>海量借款平台</p>
            <span>轻松借款，超低门槛</span>
            <div class="button transparent" @click='goFinanceMarket'>即将进入贷款超市 {{second}}s..</div>
        </modal>

        <confirm 
            :show='show_modal_logout'
            @close='show_modal_logout = false'
            @confirm='logout'
            title='确认退出'
            tips='是否确认退出登录'></confirm>

        <footer-bar></footer-bar>

        <login
            :show='showLogin'
            @finish='init'
            @showAgreement='show_agreement = true'
            @close='showLogin = false'></login>

        <agreement
            :show='show_agreement'
            type='register'
            @close='show_agreement=false'></agreement>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import agreement from '../components/Agreement.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import login from '../components/Login.vue'
    import tab from '../components/Tab.vue'
    import bankCard from '../filters/filter-bankCard'
    import mobile from '../filters/filter-mobile'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, userApi, lenderApi, loginApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff, getOS } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            agreement,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            login,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            bankCard,
            mobile
        },
        data() {
            return {
                pageLoaded:false,
                mine:{},
                second:3,
                status:'',
                loanStatus:'',
                show_modal_logout:false,
                show_modal_android:false,
                show_agreement:false,
                placeholderImg:require('../images/loading_1.png'),
                showLogin:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            serviceUrl(){
                let href
                if(this.configInfo.serviceCall){
                    href = `tel:${this.configInfo.serviceCall}`
                }
                else{
                    href = this.configInfo.serviceUrl
                }
                return href
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            hasMine(){
                return !_.isEmpty(this.mine)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setAuthIdImgs',
                'setHasTradePassword'
            ]),
            // function


            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                return allApi.log(eventParams)
            },
            checkLogin(){
                if(!this.sessionId){
                    if(getOS() == 'Android' && !this.configInfo.supportCashLoan){
                        this.show_modal_android = true
                        this.delayHandle()
                        return
                    }
                    this.showLogin = true
                    return false
                }
                return true
            },
            goService(){
                let timeout = true
                this.log('c_customer')
                .then(result=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                .catch(error=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                setTimeout(()=>{
                    if(timeout){
                        location.href = this.serviceUrl
                    }
                },3000)
            },
            goFinanceMarket(){
                //location.href = 'http://xssd.fanzhoutech.com/mobile/applyform?par=495A3784521D54E90579FC4888E0F8BE'
            },
            delayHandle(){
                this.second = 3
                this.countDown(()=>{
                    this.goFinanceMarket()
                })
            },
            countDown(callback){
                const time = setTimeout(()=>{
                    if(this.second == 1){
                        callback && callback()
                        return
                    }
                    this.second --
                    this.countDown(callback)
                },1000)
            },
            goRouter(name){
                if(!this.checkLogin()) return
                if(!this.sessionId){
                    this.showLogin = true
                    return
                }
                this.$router.push({
                    name:name
                })
            },
            clear(){
                localStorage.clear()
            },
            logout(){
                this.showLoading()
                userApi.logout()
                .then(result=>{
                    this.hideLoading()
                    this.show_modal_logout = false
                    this.setSessionId('')
                    this.setAuthIdImgs('remove')
                    this.setNeedLogin(true)
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            getUserStatus(){
                return userApi.userStatus()
                .then(result=>{
                    this.status = result.authStatus
                    this.loanStatus = result.loanStatus
                })
            },
            getMine(num){
                return userApi.mine()
                .then(result=>{
                    this.mine = result
                })
            },
            init(){
                this.showLoading()
                Promise.all([this.getUserStatus(), this.getMine()])
                .then(result=> {
                    this.pageLoaded = true
                    this.hideLoading()
                })
                .catch(error=> {
                    console.error(error);
                    this.pageLoaded = true
                    this.hideLoading()
                })
            }
        },
        created(){
            if(this.sessionId){
                this.showLoading()
                Promise.all([this.getUserStatus(), this.getMine()])
                .then(result=> {
                    this.pageLoaded = true
                    this.hideLoading()
                })
                .catch(error=> {
                    console.error(error);
                    this.pageLoaded = true
                    this.hideLoading()
                })
                return
            }
            this.pageLoaded = true
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #mine{
        background-color: #fff;
        .wrapper{
            padding-bottom: 100px;
        }
        .mine-header{
            background-image: linear-gradient(to right, #0137A5 0%, #FF8A72 100%);
            padding-top: 32px;
            padding-bottom: 20px;
            text-align: center;
            color:#fff;
        }
        .mine-header__avatar{
            position: relative;
            display: flex;
            justify-content: center;
            .avatar{
                width: 64px;
                height: 64px;
                position: relative;
                display: block;
                img{
                    width: 100%;
                }
            }
            .auth{
                @extend %font-body2;
                color:#fff;
                text-align: center;
                width: 88px;
                line-height: 32px;
                border:1px solid #fff;
                border-radius: 16px;
                position: absolute;
                top:50%;
                margin-top: -16px;
                right:43px;
            }
            p{
                @extend %font-subhead;
                color:$importColor;
            }
        }
        .mine-header__tel{
            @extend %font-title;
            padding-top: 8px;
            padding-bottom: 4px;

        }
        .mine-header__status{
            @extend %font-caption;

        }
        .mine-header__list{
            display: flex;
            padding-top: 25px;
            .no-card{
                color:$grayLight;
            }
        }
        .mine-header__item{
            width: 30%;
            flex:1;
            text-align: center;
            img{
                width: 72px;
                height: 72px;
            }
            p{
                @extend %font-subhead;
                padding-top: 16px;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
            padding-bottom: 24px;
        }
        .mine-main{
            .button{
                margin: 6px 40px;
            }
        }
        .menu{
            background-color: #fff;
            padding-left: 24px;
            padding-right: 16px;
            padding-top: 16px;
        }
        .menu-list{
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: 1px solid $sectionColor;
            &:last-child{
                border-bottom: none;
            }
        }
        .menu__item{
            display: flex;
            align-items: center;
            padding-top: 16px;
            padding-bottom: 16px;
            img{
                display: block;
                width: 24px;
                height: 24px;
                margin-right: 16px;
            }
            span{
                @extend %font-subhead;
                display: block;
            }
            p{
                @extend %font-subhead;
                flex:1;
                color:$importColor;
            }
            .iconfont{
                display: block;
                font-size: 16px;
            }
        }
        .mine-login{
            @extend %font-body2;
            color:#fff;
            text-align: center;
            width: 88px;
            margin:20px auto 0 auto;
            line-height: 32px;
            border:1px solid #fff;
            border-radius: 16px;
        }
        .logout{
            padding:10px 16px;
            text-align:center;
            p{
                color:$orange;
            }
        }
        .modal-success{
            text-align: center;
            p{
                padding-top: 8px;
                @extend %font-button;
                color:$importColor;
            }
            span{
                padding-top: 16px;
                display: block;
                @extend %font-body1;
            }
            .button{
                margin-top: 30px;
            }
        }
    }

</style>
